<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas id="c" width="400" height="300"></canvas>

    <script id="vertex-shader" type="x-shader/x-vertex">
      attribute vec2 a_position;
      uniform vec2 u_resolution;
      varying vec2 v_position_color;

      void main(){
        vec2 xy = a_position / u_resolution;
        // vec2 position = (xy * 2.0) - 1.0;

        gl_Position = vec4(xy,0,1);
        v_position_color = xy;
      }
    </script>

    <script id="fragment-shader" type="x-shader/x-fragment">
      precision mediump float;
      uniform vec4 u_color;
      varying vec2 v_position_color;

      void main(){
        gl_FragColor =  vec4(v_position_color,1,1);
        //u_color;
      }
    </script>

    <script>
      window.onload = function () {
        const gl = document.querySelector('#c').getContext('webgl')

        if (!gl) return

        const vertexSource = document.querySelector('#vertex-shader').text
        const fragmentSource = document.querySelector('#fragment-shader').text

        // create shader
        function createShader(gl, type, source) {
          const shader = gl.createShader(type)
          gl.shaderSource(shader, source)
          //
          gl.compileShader(shader)

          if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
            console.log('created shader had error', gl.getShaderInfoLog(shader))
            gl.deleteShader(shader)
            return null
          }

          return shader
        }
        const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexSource)
        const fragmentShader = createShader(
          gl,
          gl.FRAGMENT_SHADER,
          fragmentSource
        )

        console.log(vertexShader, fragmentShader)

        // create shader program
        function createShaderProgram(gl, vertexShader, fragmentShader) {
          const program = gl.createProgram()
          gl.attachShader(program, vertexShader)
          gl.attachShader(program, fragmentShader)
          gl.linkProgram(program)

          if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
            console.log(
              `created shader program had error: ${gl.getProgramInfoLog(
                program
              )}`
            )
            return null
          }

          return program
        }
        const shaderProgram = createShaderProgram(
          gl,
          vertexShader,
          fragmentShader
        )

        const programBuffer = gl.createBuffer()
        gl.bindBuffer(gl.ARRAY_BUFFER, programBuffer)
        gl.bufferData(
          gl.ARRAY_BUFFER,
          new Float32Array([
            0, 300, 400, 0, 0, 0, 0, 300, 400, 300, 400, 0, 0, 300, -400, 0, 0,
            0, 0, 300, -400, 0, -400, 300, 0, 0, 400, 0, 400, -300, 400, -300,
            0, 0, 0, -300, 0, 0, -400, 0, -400, -300, 0, 0, -400, -300, 0, -300,
          ]),
          gl.STATIC_DRAW
        )

        //
        {
          gl.viewport(0, 0, gl.canvas.width, gl.canvas.height)
          gl.clearColor(0, 0, 0, 0)
          gl.clear(gl.COLOR_BUFFER_BIT)
        }

        gl.useProgram(shaderProgram)
        const positionAttributeLocation = gl.getAttribLocation(
          shaderProgram,
          'a_position'
        )
        const resolutionUniformLocation = gl.getUniformLocation(
          shaderProgram,
          'u_resolution'
        )
        const colorUniformLocation = gl.getUniformLocation(
          shaderProgram,
          'u_color'
        )

        gl.uniform2f(
          resolutionUniformLocation,
          gl.canvas.width,
          gl.canvas.height
        )
        gl.uniform4f(colorUniformLocation, 1, 0, 0.5, 1)

        gl.enableVertexAttribArray(positionAttributeLocation)
        gl.vertexAttribPointer(
          positionAttributeLocation,
          2,
          gl.FLOAT,
          false,
          0,
          0
        )

        gl.drawArrays(gl.TRIANGLES, 0, 24)
      }
    </script>
  </body>
</html>
